<!-- param: viewMode-控制显示，id-控制数据加载，mode-控制button加载 -->
<template>
  <el-container
    v-loading="loading"
  >
    <!-- 右侧菜单 -->
    <el-container>
      <!-- 功能按钮组 -->
      <el-header height="42px">
        <span v-if="viewMode === 'list'" class="ik-list-title">
          <span class="svg-container ik-list-icon">
            <svg-icon icon-class="database" />
          </span>
          <span>数据列表</span>
        </span>
        <!-- 菜单 -->
        <el-button-group v-if="viewMode === 'list'" class="ik-list-menu">
          <el-button class="ik-list-menu-btn" size="medium" @click="listCreateBtn">新增</el-button>
          <el-button class="ik-list-menu-btn" size="medium" @click="listUpdateBtn">修改</el-button>
          <el-button class="ik-list-menu-btn" size="medium" @click="listDetailsBtn">详情</el-button>
          <el-button class="ik-list-menu-btn" size="medium" @click="listDeleteBtn">删除</el-button>
        </el-button-group>
        <!-- 信息页菜单 -->
        <el-button-group v-if="viewMode === 'info'" class="ik-list-menu">
          <!-- 编辑模式  add - 新增模式, edit - 编辑模式, details - 详情模式 -->
          <el-button v-if="mode === 'edit' || mode === 'details' " class="ik-list-menu-btn" size="medium" @click="infoCreateBtn">新增</el-button>
          <el-button v-if="mode === 'details'" class="ik-list-menu-btn" size="medium" @click="infoUpdateBtn">修改</el-button>
          <el-button v-if="mode === 'edit' || mode === 'details'" class="ik-list-menu-btn" size="medium" @click="infoCopyBtn">复制</el-button>
          <el-button v-if="mode === 'edit'" class="ik-list-menu-btn" size="medium" @click="infoDetailsBtn">详情</el-button>
          <el-button v-if="mode === 'add' || mode === 'edit'" class="ik-list-menu-btn" size="medium" @click="infoSaveBtn">保存</el-button>
          <el-button class="ik-list-menu-btn" size="medium" @click="infoCancelBtn">取消</el-button>
        </el-button-group>
      </el-header>
      <el-main>
        <!-- 表头 -->
        <el-form
          v-if="viewMode === 'info'"
          id="ik-info-head"
          v-model="data.head"
          class="ik-info-head"
          :inline="true"
          label-width="120px"
          :disabled="mode === 'details'"
          @validate="validate"
        >
          <el-row>
            <el-col :span="6">
              <ik-form-id
                :ref="'input_id'"
                v-model="data.head['id']"
                code="id"
                name="ID"
                :default-value="0"
                :disabled="false"
                @onFieldChange="onFieldChange"
              />
            </el-col>
            <el-col :span="6">
              <ik-form-text
                :ref="'input_code'"
                v-model="data.head['code']"
                code="code"
                name="编码"
                default-value=""
                :min-length="0"
                :max-length="20"
                :disabled="false"
                @onFieldChange="onFieldChange"
              />
            </el-col>
            <el-col :span="6">
              <ik-form-datetime
                :ref="'input_businessTime'"
                v-model="data.head['businessTime']"
                code="businessTime"
                name="业务时间"
                default-value=""
                :disabled="false"
                :require="true"
                @onFieldChange="onFieldChange"
              />
            </el-col>
            <el-col :span="6">
              <ik-form-text
                :ref="'input_name'"
                v-model="data.head['name']"
                code="name"
                name="名称"
                default-value=""
                :min-length="0"
                :max-length="20"
                :disabled="false"
                @onFieldChange="onFieldChange"
              />
            </el-col>
            <el-col :span="6">
              <ik-form-id
                :ref="'input_userId'"
                v-model="data.head['userId']"
                code="userId"
                name="用户ID"
                :default-value="0"
                :disabled="false"
                @onFieldChange="onFieldChange"
              />
            </el-col>
            <el-col :span="6">
              <ik-form-text
                :ref="'input_userCode'"
                v-model="data.head['userCode']"
                code="userCode"
                name="用户编码"
                default-value=""
                :min-length="0"
                :max-length="20"
                :disabled="false"
                @onFieldChange="onFieldChange"
              />
            </el-col>
            <el-col :span="6">
              <ik-form-text
                :ref="'input_userName'"
                v-model="data.head['userName']"
                code="userName"
                name="用户名称"
                default-value=""
                :min-length="0"
                :max-length="20"
                :disabled="false"
                @onFieldChange="onFieldChange"
              />
            </el-col>
            <el-col :span="6">
              <ik-form-id
                :ref="'input_storeId'"
                v-model="data.head['storeId']"
                code="storeId"
                name="门店ID"
                :default-value="0"
                :disabled="false"
                :require="true"
                @onFieldChange="onFieldChange"
              />
            </el-col>
            <el-col :span="6">
              <ik-form-data-popup
                :ref="'input_storeCode'"
                v-model="data.head['storeCode']"
                url="base/user/user/store/find/findPagination"
                :filed-list="[
                  { code: 'code', name: '编码' },
                  { code: 'name', name: '名称' }
                ]"
                search-key="name"
                :searcher="{}"
                code="storeCode"
                name="门店编码"
                default-value=""
                :disabled="false"
                :require="true"
                @onFieldChange="onFieldChange"
                @onPopupClick="headPopupClick"
              />
            </el-col>
            <el-col :span="6">
              <ik-form-text
                :ref="'input_storeName'"
                v-model="data.head['storeName']"
                code="storeName"
                name="门店名称"
                default-value=""
                :min-length="0"
                :max-length="20"
                :disabled="false"
                :require="true"
                @onFieldChange="onFieldChange"
              />
            </el-col>
            <el-col :span="6">
              <ik-form-id
                :ref="'input_positionId'"
                v-model="data.head['positionId']"
                code="positionId"
                name="药库ID"
                :default-value="0"
                :disabled="false"
                :require="true"
                @onFieldChange="onFieldChange"
              />
            </el-col>
            <el-col :span="6">
              <ik-form-data-popup
                :ref="'input_positionCode'"
                v-model="data.head['positionCode']"
                url="clinic/inventory/inventory/position/find/findPagination"
                :filed-list="[
                  { code: 'code', name: '编码' },
                  { code: 'name', name: '名称' }
                ]"
                search-key="name"
                :searcher="{'storeId': data.head['storeId']}"
                code="positionCode"
                name="药库编码"
                default-value=""
                :min-length="0"
                :max-length="20"
                :disabled="false"
                :require="true"
                @onFieldChange="onFieldChange"
                @onPopupClick="headPopupClick"
              />
            </el-col>
            <el-col :span="6">
              <ik-form-text
                :ref="'input_positionName'"
                v-model="data.head['positionName']"
                code="positionName"
                name="药库名称"
                default-value=""
                :min-length="0"
                :max-length="20"
                :disabled="false"
                :require="true"
                @onFieldChange="onFieldChange"
              />
            </el-col>
            <el-col :span="6">
              <ik-form-select
                :ref="'input_positionPositionSign'"
                v-model="data.head['positionPositionSign']"
                code="positionPositionSign"
                name="位置标识"
                default-value=""
                key-field="key"
                value-field="value"
                :options="toJson(jsonStr.positionSign)"
                :disabled="false"
                :require="false"
                @onFieldChange="onFieldChange"
              />
            </el-col>
            <el-col :span="6">
              <ik-form-select
                :ref="'input_positionClassifySign'"
                v-model="data.head['positionClassifySign']"
                code="positionClassifySign"
                name="分类标识"
                default-value=""
                key-field="key"
                value-field="value"
                :options="toJson(jsonStr.classifySign)"
                :disabled="false"
                :require="false"
                @onFieldChange="onFieldChange"
              />
            </el-col>
            <el-col :span="6">
              <ik-form-select
                :ref="'input_executeSign'"
                v-model="data.head['executeSign']"
                code="executeSign"
                name="执行标识"
                default-value="1"
                key-field="key"
                value-field="value"
                :options="toJson(jsonStr.executeSign)"
                :disabled="false"
                :require="true"
                @onFieldChange="onFieldChange"
              />
            </el-col>
            <el-col :span="6">
              <ik-form-select
                :ref="'input_stateSign'"
                v-model="data.head['stateSign']"
                code="stateSign"
                name="状态标识"
                default-value="1"
                key-field="key"
                value-field="value"
                :options="toJson(jsonStr.stateSign)"
                :disabled="false"
                :require="true"
                @onFieldChange="onFieldChange"
              />
            </el-col>
            <el-col :span="6">
              <ik-form-number
                :ref="'input_costAmount'"
                v-model="data.head['costAmount']"
                code="costAmount"
                name="成本金额"
                :default-value="0"
                :disabled="false"
                :require="true"
                @onFieldChange="onFieldChange"
              />
            </el-col>
            <el-col :span="6">
              <ik-form-number
                :ref="'input_discountAmount'"
                v-model="data.head['discountAmount']"
                code="discountAmount"
                name="优惠金额"
                :default-value="0"
                :disabled="false"
                :require="true"
                @onFieldChange="onFieldChange"
              />
            </el-col>
            <el-col :span="6">
              <ik-form-number
                :ref="'input_costAmount'"
                v-model="data.head['costAmount']"
                code="costAmount"
                name="优惠金额"
                :default-value="0"
                :disabled="false"
                :require="true"
                @onFieldChange="onFieldChange"
              />
            </el-col>
            <el-col :span="6">
              <ik-form-number
                :ref="'input_paymentAmount'"
                v-model="data.head['paymentAmount']"
                code="paymentAmount"
                name="支付金额"
                :default-value="0"
                :disabled="false"
                :require="true"
                @onFieldChange="onFieldChange"
              />
            </el-col>
          </el-row>
        </el-form>
        <!-- 表身 -->
        <el-tabs
          v-if="viewMode === 'info'"
          ref="ik-info-body"
          v-model="activeTab"
          class="retail-ord-tabs-info"
          type="card"
        >
          <el-tab-pane
            :key="bodyMap[0].key"
            :name="bodyMap[0].key"
            :label="bodyMap[0].name"
            style="height:100%;"
          >
            <el-table
              ref="tablesub"
              v-loading="loading"
              v-horizontal-scroll="'always'"
              :data="data.body[bodyMap[0].key]"
              element-loading-text="加载中..."
              :stripe="true"
              :border="true"
              :fit="true"
              class="ik-list-table"
              height="100%"
              :header-row-class-name="'ik-list-table-header-row'"
              :header-cell-class-name="'ik-list-table-header-cell'"
              :row-class-name="'ik-list-table-body-row'"
              :cell-class-name="'ik-list-table-body-cell'"
              :highlight-current-row="true"
            >
              <el-table-column
                v-if="mode !== 'details'"
                prop="pluss"
                label="操作"
                width="180"
              >
                <template v-slot:header>
                  <div class="button-action">
                    <span style="padding:0 12px;">操作</span><el-button circle :style="{width:'26px',height:'26px',color:'#409EFF',padding:'3px 0','margin-top':'3px'}" title="添加首行" @click="addRow(activeTab, -1)">+</el-button>
                  </div>
                </template>
                <template #default="scope">
                  <div class="button-action">
                    <el-button circle :style="{width:'28px',height:'28px',color:'#409EFF',padding:'3px 0','margin-top':'3px'}" @click.stop="addRow(bodyMap[0].key, scope.$index)">+</el-button>
                    <el-button circle :style="{width:'28px',height:'28px',color:'#409EFF',padding:'3px 0','margin-top':'3px'}" @click.stop="delRow(bodyMap[0].key, scope.$index)">-</el-button>
                  </div>
                </template>
              </el-table-column>
              <ik-column-id
                code="id"
                name="ID"
                :edit="mode !== 'details'"
                @onFieldChange="onBodyFieldChange"
              />
              <!--
              <ik-column-text
                code="line"
                name="行号"
                :edit="false"
                @onFieldChange="onBodyFieldChange"
              />
              -->
              <ik-column-id
                code="retailOrdId"
                name="单据ID"
                :edit="mode !== 'details'"
                @onFieldChange="onBodyFieldChange"
              />
              <ik-column-hidden
                code="retailOrdCode"
                name="单据编码"
                :edit="mode !== 'details'"
                @onFieldChange="onBodyFieldChange"
              />
              <ik-column-id
                code="materielId"
                name="药品ID"
                :edit="mode !== 'details'"
                @onFieldChange="onBodyFieldChange"
              />
              <ik-column-text
                code="materielCode"
                name="药品编码"
                :edit="false"
                :require="true"
                @onFieldChange="onBodyFieldChange"
              />
              <ik-column-data-popup
                code="materielName"
                name="药品名称"
                url="clinic/inventory/inventory/inventory/find/findBatchInventoryPagination"
                :filed-list="[
                  { code: 'materielCode', name: '编码' },
                  { code: 'materielIotCode', name: '条码' },
                  { code: 'materielName', name: '名称' },
                  { code: 'batchCode', name: '批次' },
                  { code: 'qualitySign', name: '品质' },
                  { code: 'manufacturerName', name: '生产商' },
                  { code: 'supplierName', name: '供应商' },
                  { code: 'number', name: '余量' },
                  { code: 'costPrice', name: '成本单价' },
                ]"
                search-key="materielName"
                :searcher="{positionCode: data.head['positionCode']}"
                :edit="mode !== 'details'"
                @onFieldChange="onBodyFieldChange"
                @onPopupClick="bodyPopupClick"
              />
              <ik-column-data-popup
                code="iotCode"
                name="条码"
                url="clinic/inventory/inventory/inventory/find/findBatchInventoryPagination"
                :filed-list="[
                  { code: 'materielName', name: '名称' },
                  { code: 'materielIotCode', name: '条码' },
                  { code: 'batchCode', name: '批次' },
                  { code: 'qualitySign', name: '品质' },
                  { code: 'manufacturerName', name: '生产商' },
                  { code: 'supplierName', name: '供应商' },
                  { code: 'number', name: '余量' },
                  { code: 'costPrice', name: '成本单价' },
                ]"
                search-key="ioTCode"
                :searcher="{positionCode: data.head['positionCode']}"
                :edit="mode !== 'details'"
                @onFieldChange="onBodyFieldChange"
                @onPopupClick="bodyPopupClick"
              />
              <ik-column-id
                code="medSpecId"
                name="药品规格ID"
                :edit="mode !== 'details'"
                @onFieldChange="onBodyFieldChange"
              />
              <ik-column-text
                code="medSpecCode"
                name="药品规格编码"
                :edit="mode !== 'details'"
                @onFieldChange="onBodyFieldChange"
              />
              <ik-column-text
                code="medSpecName"
                name="药品规格名称"
                :edit="mode !== 'details'"
                @onFieldChange="onBodyFieldChange"
              />
              <ik-column-id
                code="medDosageId"
                name="药品剂型ID"
                :edit="mode !== 'details'"
                @onFieldChange="onBodyFieldChange"
              />
              <ik-column-text
                code="medDosageCode"
                name="药品剂型编码"
                :edit="mode !== 'details'"
                @onFieldChange="onBodyFieldChange"
              />
              <ik-column-text
                code="medDosageName"
                name="药品剂型名称"
                :edit="mode !== 'details'"
                @onFieldChange="onBodyFieldChange"
              />
              <ik-column-select
                code="qualitySign"
                name="品质标识"
                key-field="key"
                value-field="value"
                :options="toJson(jsonStr.qualitySign)"
                :edit="mode !== 'details'"
                @onFieldChange="onBodyFieldChange"
              />
              <ik-column-number
                code="sellingNum"
                name="销售数量"
                :edit="mode !== 'details'"
                @onFieldChange="onBodyFieldChange"
              />
              <ik-column-number
                code="costPrice"
                name="成本单价"
                :edit="mode !== 'details'"
                @onFieldChange="onBodyFieldChange"
              />
              <ik-column-number
                code="costAmount"
                name="成本金额"
                :edit="mode !== 'details'"
                @onFieldChange="onBodyFieldChange"
              />
              <ik-column-number
                code="salePrice"
                name="销售单价"
                :edit="mode !== 'details'"
                @onFieldChange="onBodyFieldChange"
              />
              <ik-column-number
                code="saleAmount"
                name="销售金额"
                :edit="mode !== 'details'"
                @onFieldChange="onBodyFieldChange"
              />
              <ik-column-id
                code="medUomId"
                name="药品单位ID"
                :edit="mode !== 'details'"
                @onFieldChange="onBodyFieldChange"
              />
              <ik-column-text
                code="medUomCode"
                name="药品单位编码"
                :edit="mode !== 'details'"
                @onFieldChange="onBodyFieldChange"
              />
              <ik-column-text
                code="medUomName"
                name="药品单位名称"
                :edit="mode !== 'details'"
                @onFieldChange="onBodyFieldChange"
              />
              <ik-column-text
                code="medAdvice"
                name="医嘱"
                :edit="mode !== 'details'"
                @onFieldChange="onBodyFieldChange"
              />
              <ik-column-number
                code="dayNum"
                name="用药天数"
                :edit="mode !== 'details'"
                @onFieldChange="onBodyFieldChange"
              />
              <ik-column-number
                code="dayFreq"
                name="每日次数"
                :edit="mode !== 'details'"
                @onFieldChange="onBodyFieldChange"
              />
              <ik-column-number
                code="freqNum"
                name="每次剂量"
                :edit="mode !== 'details'"
                @onFieldChange="onBodyFieldChange"
              />
              <ik-column-id
                code="meaUomId"
                name="计量单位ID"
                :edit="mode !== 'details'"
                @onFieldChange="onBodyFieldChange"
              />
              <ik-column-text
                code="meaUomCode"
                name="计量单位编码"
                :edit="mode !== 'details'"
                @onFieldChange="onBodyFieldChange"
              />
              <ik-column-text
                code="meaUomName"
                name="计量单位名称"
                :edit="mode !== 'details'"
                @onFieldChange="onBodyFieldChange"
              />
            </el-table>
          </el-tab-pane>
        </el-tabs>
        <!-- 查询区 -->
        <div class="querybg">
          <el-collapse
            v-if="viewMode === 'list'"
            v-model="searcherActive"
            class="ik-list-searcher"
            accordion
          >
            <el-collapse-item class="ik-list-searcher-item" title="" name="1">
              <template #title>
                <div class="ik-list-searcher-item-titles">
                  <span class="svg-container ik-list-icon">
                    <svg-icon icon-class="search" />
                  </span>
                  查询条件
                </div>
              </template>
              <el-form
                id="ik-info-head"
                v-model="searcher"
                class="ik-info-head"
                :inline="true"
                label-width="120px"
                :disabled="false"
              >
                <el-row>
                  <el-col :span="6">
                    <ik-form-text
                      :ref="'input_code'"
                      v-model="searcher['code']"
                      code="code"
                      name="编码"
                      default-value=""
                      :min-length="0"
                      :max-length="20"
                      :disabled="false"
                    />
                  </el-col>
                  <el-col :span="6">
                    <ik-form-select
                      :ref="'input_executeSign'"
                      v-model="data.head['executeSign']"
                      code="executeSign"
                      name="执行标识"
                      default-value=""
                      key-field="key"
                      value-field="value"
                      :options="toJson(jsonStr.executeSign)"
                      :disabled="false"
                    />
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="6">
                    <ik-form-text
                      :ref="'input_storeCode'"
                      v-model="searcher['storeCode']"
                      code="storeCode"
                      name="门店编码"
                      default-value=""
                      :min-length="0"
                      :max-length="20"
                      :disabled="false"
                    />
                  </el-col>
                  <el-col :span="6">
                    <ik-form-text
                      :ref="'input_storeName'"
                      v-model="searcher['storeName']"
                      code="storeName"
                      name="门店名称"
                      default-value=""
                      :min-length="0"
                      :max-length="20"
                      :disabled="false"
                    />
                  </el-col>
                  <el-col :span="6">
                    <ik-form-text
                      :ref="'input_positionCode'"
                      v-model="searcher['positionCode']"
                      code="positionCode"
                      name="药库编码"
                      default-value=""
                      :min-length="0"
                      :max-length="20"
                      :disabled="false"
                    />
                  </el-col>
                  <el-col :span="6">
                    <ik-form-text
                      :ref="'input_positionName'"
                      v-model="searcher['positionName']"
                      code="positionName"
                      name="药库名称"
                      default-value=""
                      :min-length="0"
                      :max-length="20"
                      :disabled="false"
                    />
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="6">
                    <ik-form-text
                      :ref="'input_userCode'"
                      v-model="searcher['userCode']"
                      code="userCode"
                      name="用户编码"
                      default-value=""
                      :min-length="0"
                      :max-length="20"
                      :disabled="false"
                    />
                  </el-col>
                  <el-col :span="6">
                    <ik-form-text
                      :ref="'input_userName'"
                      v-model="searcher['userName']"
                      code="userName"
                      name="用户名称"
                      default-value=""
                      :min-length="0"
                      :max-length="20"
                      :disabled="false"
                    />
                  </el-col>
                </el-row>
              </el-form>
              <div class="query-class">
                <div class="query-btn-warp">
                  <el-button type="primary" size="small" @click="searchBtn">查询</el-button>
                  <el-button type="primary" size="small" @click="resetBtn">重置</el-button>
                </div>
              </div>
            </el-collapse-item>
          </el-collapse>
        </div>
        <!-- 数据表 -->
        <el-table
          v-if="viewMode === 'list'"
          ref="table"
          v-loading="listLoading"
          :data="tableData"
          element-loading-text="加载中..."
          :stripe="true"
          :border="true"
          :fit="true"
          class="ik-list-table"
          height="calc(100% - 50px)"
          :header-row-class-name="'ik-list-table-header-row'"
          :header-cell-class-name="'ik-list-table-header-cell'"
          :row-class-name="'ik-list-table-body-row'"
          :cell-class-name="'ik-list-table-body-cell'"
          :highlight-current-row="true"
          @row-click="rowClick"
        >
          <ik-column-id
            code="id"
            name="ID"
            :edit="false"
          />
          <ik-column-text
            code="code"
            name="编码"
            :edit="false"
          />
          <ik-column-datetime
            code="businessTime"
            name="业务时间"
            :edit="false"
          />
          <ik-column-text
            code="name"
            name="名称"
            :edit="false"
          />
          <ik-column-id
            code="userId"
            name="用户ID"
            :edit="false"
          />
          <ik-column-text
            code="userCode"
            name="用户编码"
            :edit="false"
          />
          <ik-column-text
            code="userName"
            name="用户名称"
            :edit="false"
          />
          <ik-column-id
            code="storeId"
            name="门店ID"
            :edit="false"
          />
          <ik-column-text
            code="storeCode"
            name="门店编码"
            :edit="false"
          />
          <ik-column-text
            code="storeName"
            name="门店名称"
            :edit="false"
          />
          <ik-column-id
            code="positionId"
            name="药库ID"
            :edit="false"
          />
          <ik-column-text
            code="positionCode"
            name="药库编码"
            :edit="false"
          />
          <ik-column-text
            code="positionName"
            name="药库名称"
            :edit="false"
          />
          <ik-column-select
            code="executeSign"
            name="执行标识"
            key-field="key"
            value-field="value"
            :options="toJson(jsonStr.executeSign)"
            :edit="false"
          />
          <ik-column-text
            code="saleAmount"
            name="销售金额"
            :edit="false"
          />
        </el-table>
      </el-main>
      <!-- 分页组件 -->
      <el-footer height="40px">
        <ik-pagination
          v-if="viewMode === 'list'"
          ref="ik_list_pagination"
          :page-no="pagination.pageNo"
          :page-size="pagination.pageSize"
          :total-count="pagination.totalCount"
          @pageChangeMethod="pageChange"
        />
        <el-row v-else class="ik-list-pagination" :gutter="0">
          <el-col :span="6" class="ik-list-enterprise-info" :offset="12">
            <span style="float: left"> 导萃门诊管理系统 </span>
          </el-col>
        </el-row>
      </el-footer>
    </el-container>
  </el-container>
</template>
<script>
// 表单组件
import IkFormId from '@/components/ik/form/input/IkFormId'
import IkFormText from '@/components/ik/form/input/IkFormText'
import IkFormSelect from '@/components/ik/form/input/IkFormSelect'
import IkFormNumber from '@/components/ik/form/input/IkFormNumber'
import IkFormDatetime from '@/components/ik/form/input/IkFormDatetime'
import IkFormDataPopup from '@/components/ik/form/input/IkFormDataPopup'
import IkColumnId from '@/components/ik/table/ikColumn/IkColumnId'
import IkColumnHidden from '@/components/ik/table/ikColumn/IkColumnHidden'
import IkColumnText from '@/components/ik/table/ikColumn/IkColumnText'
import IkColumnSelect from '@/components/ik/table/ikColumn/IkColumnSelect'
import IkColumnNumber from '@/components/ik/table/ikColumn/IkColumnNumber'
import IkColumnDatetime from '@/components/ik/table/ikColumn/IkColumnDatetime'
import IkColumnDataPopup from '@/components/ik/table/ikColumn/IkColumnDataPopup'
import IkPagination from '@/components/ik/pagination/IkPagination'
import { getById, findPage, save, update, remove } from '@/api/ik/data/dataApi'
export default {
  components: {
    // 表单组件
    IkFormId,
    IkFormText,
    IkFormNumber,
    IkFormSelect,
    IkFormDatetime,
    IkFormDataPopup,
    IkColumnId,
    IkColumnHidden,
    IkColumnText,
    IkColumnNumber,
    IkColumnSelect,
    IkColumnDatetime,
    IkColumnDataPopup,
    IkPagination
  },
  props: {
  },
  data() {
    return {
      // ===== ===== ===== ===== 全局属性 ===== ===== ===== =====
      // 后台接口路径
      bgPath: 'clinic/inventory/retail/retailord',
      // Web路径
      webPath: 'clinic/inventory/retail/retail_ord',
      // 标识字段JSON
      jsonStr: {
        positionSign: '[{"key": "1", "value": "药房"}, {"key": "2", "value": "药库"}]',
        classifySign: '[{"key": "1", "value": "中成药"}, {"key": "3", "value": "饮片"}, {"key": "5", "value": "产品"}]',
        qualitySign: '[{"key": "1", "value": "普通"}, {"key": "2", "value": "精品"}]',
        executeSign: '[{"key": "1", "value": "草稿"}, {"key": "2", "value": "完成"}]',
        stateSign: '[{"key": "1", "value": "待结算"}, {"key": "2", "value": "待取药"}, {"key": "3", "value": "已完成"}]'
      },
      // 界面模式  info - 信息页, list - 列表页
      viewMode: '',
      // 编辑模式  add - 新增模式, edit - 编辑模式, details - 详情模式, list - 列表模式
      mode: '',
      // 加载标识、列表加载标识
      loading: false,
      listLoading: false,
      // ===== ===== ===== ===== 列表页属性 ===== ===== ===== =====
      // 查询器是否激活
      searcherActive: "0",
      searcher: {},
      // 列表页数据
      tableData: [],
      // 当前选中行
      activeRow: {},
      // 分页器
      pagination: {
        pageNo: 1,
        pageSize: 20,
        totalCount: 2
      },
      // ===== ===== ===== ===== 信息页属性 ===== ===== ===== =====
      // 当前数据id
      id: 0,
      // 当前数据
      data: {
        head: { 'id': 0, 'code': '', 'name': '', 'businessTime': '', 'userId': 0, 'userCode': '', 'userName': '', 'storeId': 0, 'storeCode': '', 'storeName': '', 'positionId': 0, 'positionCode': '', 'positionName': '', 'executeSign': '', 'saleAmount': 0 },
        body: { 'retailOrdItem': [] }
      },
      // 子表清单
      bodyMap: [{ key: 'retailOrdItem', name: '零售单项' }],
      // 主表验证器
      validate: [],
      // 子表验证器
      bodyValidate: [],
      // 当前子表
      activeTab: 'retailOrdItem',
      verify: {
        head: {},
        body: {}
      }
    }
  },
  computed: {
  },
  watch: {
  },
  created() {
    // 获取视图模式
    this.viewMode = this.$route.params.viewMode || "list"
    this.mode = this.$route.params.mode || "list"
    this.id = this.$route.query.id || 0
    // 初始化界面，设置模式取值
    if (this.mode === "list") {
      this.viewMode = "list"
    } else {
      this.viewMode = "info"
    }
    // 列表页进入时的处理
    if (this.viewMode === "list") {
      this.find()
    } else if (this.viewMode === "info") {
      if (this.id !== 0) {
        this.get(this.id)
      }
    }
  },
  methods: {
    // ===== ===== ===== ===== 工具方法 ===== ===== ===== =====
    // 工具方法 - 转为json
    toJson(jsonStr) {
      return JSON.parse(jsonStr)
    },
    // ===== ===== ===== ===== 工具栏按钮 ===== ===== ===== =====
    listCreateBtn() {
      this.$router.push({ path: '/business/manager/' + this.webPath + '/info/add' })
    },
    // 列表页编辑按钮点击
    listUpdateBtn() {
      // 是否选择行
      const $this = this
      if ($this.activeRow.id === undefined) {
        $this.$message({
          type: 'warning',
          message: '请选择需要编辑的行!'
        })
      } else {
        this.$router.push({ path: '/business/manager/' + this.webPath + '/info/edit', query: { id: $this.activeRow.id }})
      }
    },
    // 列表页详情按钮点击
    listDetailsBtn() {
      // 是否选择行
      const $this = this
      if ($this.activeRow.id === undefined) {
        $this.$message({
          type: 'warning',
          message: '请选择需要编辑的行!'
        })
      } else {
        // 修改为详情模式
        this.$router.push({ path: '/business/manager/' + this.webPath + '/info/details', query: { id: $this.activeRow.id }})
      }
    },
    // 列表页删除按钮点击
    listDeleteBtn() {
      // 是否选择行
      const $this = this
      if ($this.activeRow.id === undefined) {
        $this.$message({
          type: 'warning',
          message: '请选择需要删除的行!'
        })
      } else {
        // 问询是否删除
        this.$confirm('删除ID为' + $this.activeRow.id + '的数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.delete($this.activeRow.id)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },
    // 信息页创建按钮点击
    infoCreateBtn() {
      this.$router.push({ path: '/business/manager/' + this.webPath + '/info/add' })
    },
    // 信息页编辑按钮点击
    infoUpdateBtn() {
      // 修改为编辑模式
      this.mode = "edit"
    },
    // 复制按钮点击事件
    infoCopyBtn() {
      // 修改id为控制
      this.data.head.id = 0
      // 修改为编辑模式
      this.mode = "edit"
    },
    infoDetailsBtn() {
      // 修改为编辑模式
      this.mode = "details"
      this.get(this.data.head.id)
    },
    // 保存按钮点击事件
    infoSaveBtn() {
      this.saveOrUpdate()
    },
    // 取消按钮点击事件
    infoCancelBtn() {
      // 修改为详情模式
      this.$router.push({ path: '/business/manager/' + this.webPath + '/list/list' })
    },
    // 查询
    searchBtn() {
      this.find()
    },
    // 重置
    resetBtn() {
      this.searcher = {}
      this.find()
    },
    // ===== ===== ===== ===== 信息页表格行维护 ===== ===== ===== =====
    // 新增行按钮
    addRow(currt, index) {
      this.data.body[currt].splice(index + 1, 0, {})
    },
    // 删除行按钮
    delRow(currt, index) {
      this.data.body[currt].splice(index, 1)
      for (const item in this.verify.body) {
        console.log(item)
        if (item.startsWith('item1' + '-' + index + '-')) {
          delete this.verify.body[item]
        }
      }
    },
    // ===== ===== ===== ===== 列表页表格点击 ===== ===== ===== =====
    // 行点击事件
    rowClick(row, column, event) {
      this.activeRow = row
    },
    // 字段变更事件
    onFieldChange(fieldName, oldValue, newValue, errorSign, errorMessage) {
      // 处理格式验证
      this.$set(this.data.head, fieldName, newValue)
      this.verify.head['head' + '-' + fieldName] = errorSign
      this.$emit('onFieldChange', fieldName, oldValue, newValue)
    },
    // 子表字段变更事件
    onBodyFieldChange(line, fieldName, oldValue, newValue, errorSign, errorMessage) {
      // 处理格式验证
      this.verify.body['item1' + '-' + line + '-' + fieldName] = errorSign
      this.$emit('onFieldChange', line, fieldName, oldValue, newValue)
    },
    // 分页器数据变更
    pageChange(pageNo, pageSize) {
      // 修改分页数据
      this.pagination.pageNo = pageNo
      this.pagination.pageSize = pageSize
      // 刷新数据
      this.find()
    },
    // 开窗点击事件
    searchPopupClick(code, row) {
      // 如果是药品字典点击
      if (code === "storeCode") {
        this.searcher["storeCode"] = row.code
      } else if (code === "supplierCode") {
        this.searcher["supplierCode"] = row.code
      } else if (code === "positionCode") {
        this.searcher["positionCode"] = row.code
      } else if (code === "inTypeCode") {
        this.searcher["inTypeCode"] = row.code
      }
    },
    // 开窗点击事件
    headPopupClick(code, row) {
      // 如果是药品字典点击
      if (code === "storeCode") {
        this.data.head["storeId"] = row.id
        this.data.head["storeCode"] = row.code
        this.data.head["storeName"] = row.name
      } else if (code === "supplierCode") {
        this.data.head["supplierId"] = row.chainDictionaryId
        this.data.head["supplierCode"] = row.chainDictionaryCode
        this.data.head["supplierName"] = row.chainDictionaryName
      } else if (code === "positionCode") {
        this.data.head["positionId"] = row.id
        this.data.head["positionCode"] = row.code
        this.data.head["positionName"] = row.name
        this.data.head["positionPositionSign"] = row.positionSign
        this.data.head["positionClassifySign"] = row.classifySign
      } else if (code === "inTypeCode") {
        this.data.head["inTypeId"] = row.id
        this.data.head["inTypeCode"] = row.code
        this.data.head["inTypeName"] = row.name
      }
    },
    // 开窗点击事件
    bodyPopupClick(line, code, row) {
      // 如果是药品字典点击
      if (code === "materielName" || code === "iotCode") {
        this.$set(this.data.body["retailOrdItem"][line], 'materielId', row.materielId)
        this.$set(this.data.body["retailOrdItem"][line], 'materielCode', row.materielCode)
        this.$set(this.data.body["retailOrdItem"][line], 'materielName', row.materielName)
        this.$set(this.data.body["retailOrdItem"][line], 'iotCode', row.materielIotCode)
        this.$set(this.data.body["retailOrdItem"][line], 'medSpecId', row.materielMedSpecId)
        this.$set(this.data.body["retailOrdItem"][line], 'medSpecCode', row.materielMedSpecCode)
        this.$set(this.data.body["retailOrdItem"][line], 'medSpecName', row.materielMedSpecName)
        this.$set(this.data.body["retailOrdItem"][line], 'medDosageId', row.materielMedDosageId)
        this.$set(this.data.body["retailOrdItem"][line], 'medDosageCode', row.materielMedDosageCode)
        this.$set(this.data.body["retailOrdItem"][line], 'medDosageName', row.materielMedDosageName)
        this.$set(this.data.body["retailOrdItem"][line], 'qualitySign', row.qualitySign)
        this.$set(this.data.body["retailOrdItem"][line], 'supplierId', row.supplierId)
        this.$set(this.data.body["retailOrdItem"][line], 'supplierCode', row.supplierCode)
        this.$set(this.data.body["retailOrdItem"][line], 'supplierName', row.supplierName)
        this.$set(this.data.body["retailOrdItem"][line], 'manufacturerId', row.manufacturerId)
        this.$set(this.data.body["retailOrdItem"][line], 'manufacturerCode', row.manufacturerCode)
        this.$set(this.data.body["retailOrdItem"][line], 'manufacturerName', row.manufacturerName)
        this.$set(this.data.body["retailOrdItem"][line], 'batchCode', row.batchCode)
        this.$set(this.data.body["retailOrdItem"][line], 'medUomId', row.materielMedUomId)
        this.$set(this.data.body["retailOrdItem"][line], 'medUomCode', row.materielMedUomCode)
        this.$set(this.data.body["retailOrdItem"][line], 'medUomName', row.materielMedUomName)
        this.$set(this.data.body["retailOrdItem"][line], 'meaUomId', row.materielMeaUomId)
        this.$set(this.data.body["retailOrdItem"][line], 'meaUomCode', row.materielMeaUomCode)
        this.$set(this.data.body["retailOrdItem"][line], 'meaUomName', row.materielMeaUomName)
      } else if (code === "supplierCode") {
        this.$set(this.data.body["retailOrdItem"][line], 'supplierId', row.chainDictionaryId)
        this.$set(this.data.body["retailOrdItem"][line], 'supplierCode', row.chainDictionaryCode)
        this.$set(this.data.body["retailOrdItem"][line], 'supplierName', row.chainDictionaryName)
      } else if (code === "manufacturerCode") {
        this.$set(this.data.body["retailOrdItem"][line], 'manufacturerId', row.chainDictionaryId)
        this.$set(this.data.body["retailOrdItem"][line], 'manufacturerCode', row.chainDictionaryCode)
        this.$set(this.data.body["retailOrdItem"][line], 'manufacturerName', row.chainDictionaryName)
      }
    },
    // ===== ===== ===== ===== 接口通讯方法 ===== ===== ===== =====
    // 保存或修改数据
    saveOrUpdate() {
      const $this = this
      // 验证
      for (const headInd in this.verify.head) {
        if (this.verify.head[headInd]) {
          $this.$message({ type: 'error', message: '数据格式异常' })
          console.log(this.verify)
          return
        }
      }
      for (const bodyInd in this.verify.body) {
        if (this.verify.body[bodyInd]) {
          console.log(this.verify.body[bodyInd])
          $this.$message({ type: 'error', message: '数据格式异常' })
          console.log(this.verify)
          return
        }
      }
      if ($this.data.head.id) {
        update($this.bgPath, $this.data).then(response => {
          // 设置ID
          $this.id = response.data
          // 刷新数据
          $this.get(response.data)
          $this.$message({
            type: 'success',
            message: '数据已保存!'
          })
          $this.viewMode = "info"
          $this.mode = "details"
        })
      } else {
        save($this.bgPath, $this.data).then(response => {
          // 设置ID
          $this.id = response.data
          // 刷新数据
          $this.get(response.data)
          $this.$message({
            type: 'success',
            message: '数据已保存!'
          })
          $this.viewMode = "info"
          $this.mode = "details"
        })
      }
    },
    // 删除数据
    delete(id) {
      const $this = this
      remove($this.bgPath, id).then(response => {
        $this.$message({
          type: 'warning',
          message: '数据已删除!'
        })
        $this.find()
      })
    },
    // 获取数据
    get(id) {
      const $this = this
      // 获取树组件数据
      getById($this.bgPath, id).then(response => {
        $this.data = response.data
      })
    },
    // 查询数据
    find() {
      const $this = this
      $this.listLoading = true
      // 获取树组件数据
      findPage($this.bgPath, $this.searcher, $this.pagination.pageSize, $this.pagination.pageNo).then(response => {
        // 设置表格数据
        $this.tableData = response.data.list
        // 设置分页器
        $this.pagination.totalCount = response.data.totalCount
        // 设置加载完成
        $this.listLoading = false
      }).catch(() => {
        $this.listLoading = false
      })
    }
  }
}
</script>
<style lang="scss" >
@import "~@/styles/listinfo.scss";
.retail-ord-tabs-info{height:calc(100% - 110px);}
.retail-ord-tabs-info .el-tabs__content{height:calc(100% - 53px);overflow:auto;min-height:350px;}
</style>
